<template>
  <view class="tn-load-more" :class="[loadMoreClass]" :style="loadMoreStyle">
    <!-- 横线 -->
    <view class="tn-load-more__line"></view>
    <!-- 内容区域 -->
    <view class="tn-load-more__content" @tap.stop="handleStatusClick">
      <!-- 加载动画 -->
      <tn-loading
        class="tn-load-more__loading"
        :mode="loadingAnimationType"
        :show="(status === 'loading') && loadingAnimation"
        animation
        :color="loadingAnimationColor"
      ></tn-loading>
      <!-- 提示数据 -->
      <view class="tn-load-more__text">
        {{ statusText }}
      </view>

    </view>
    <!-- 横线 -->
    <view class="tn-load-more__line"></view>
  </view>
</template>

<script lang="ts" setup>
import { loadMoreProps, loadMoreEmits, LoadMoreTipsText, LoadMoreStatus } from '../../../types/tn-load-more'
import { LoadingMode } from '../../../types/tn-loading'
import { computed, watch, CSSProperties } from 'vue'
import useComponentColor from '../../../libs/hooks/useComponentColor'
import { handleValueWithUnit } from '../../../utils'
import TnLoading from '../../tn-loading/src/Loading.vue'

const props = defineProps(loadMoreProps)
const emits = defineEmits(loadMoreEmits)

const { generateColorInfo } = useComponentColor()
let componentColorInfo = generateColorInfo(props?.color || '')
// 监听颜色变化实时修改颜色对应的属性
watch(() => props.color, (nVal, oVal) => {
  componentColorInfo = generateColorInfo(nVal)
})

// loadMore样式
const loadMoreStyle = computed<CSSProperties>(() => {
  let style: CSSProperties = {}
  if (componentColorInfo.style.color) {
    style.color = componentColorInfo.style.color
  }
  if (props?.fontSize) {
    style.fontSize = handleValueWithUnit(props.fontSize)
  }

  return Object.assign(style, props?.customStyle || {})
})

// loadMore对应的类
const loadMoreClass = computed<string>(() => {
  let clazz: string[] = []
  if (componentColorInfo.class) {
    clazz.push(...componentColorInfo.class)
  }
  return clazz.join(' ')
})

// 当前状态下的有效值
const statusDefaultValue: LoadMoreTipsText = {
  loadmore: '加载更多',
  loading: '正在加载...',
  nomore: '加载完毕'
}
const dotText: string = '●'
const statusText = computed<string>(() => {
  const status = props?.status || 'loadmore'
  const statusText = Object.assign(statusDefaultValue, props?.loadTipsText || {})
  return status === 'nomore' && props?.noMoreDot ? dotText : statusText[status]
})

// 加载动画类型的值
const loadingAnimationType = computed<LoadingMode>(() => {
  return props.loadingAnimationType as LoadingMode
})

// 状态点击事件
const handleStatusClick = () => {
  emits('click', (props?.status as LoadMoreStatus) || 'loadmore')
}
</script>

<script lang="ts">
export default {
  options: {
    // 在微信小程序中将组件节点渲染为虚拟节点，更加接近Vue组件的表现(不会出现shadow节点下再去创建元素)
    virtualHost: true
  }
}
</script>

<style lang="scss" scoped>

.tn-load-more {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;

  margin-top: 40rpx;
  /* 横线 start */
  &__line {
    width: 20%;
    height: 1rpx;
    border-radius: 2rpx;
    background-color: #AAAAAA;
    &:first-child {
      margin-right: 30rpx;
    }
    &:last-child {
      margin-left: 30rpx;
    }
  }
  /* 横线 end */

  &__content {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  &__loading {
    margin-right: 16rpx;
  }
}
</style>
